<template>
  <view class="my-store-info">
    <view class="my-top">
      <view class="content" v-if="title === '编辑店铺'">
        <u-cell-group>
          <u-cell
            @click="
              toPage('/pagesB/pages/index/terminal-set?id=' + storeInfo.storeId)
            "
            title="终端设置"
            :isLink="true"
            arrow-direction="right"
          >
          </u-cell>
        </u-cell-group>
      </view>
      <view class="content">
        <u-cell-group>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <view class="u-cell1">门店名称</view>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.name"
                type="text"
                input-align="right"
                placeholder="请输入门店名称"
              />
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">门店照片</text>
            </view>
            <view slot="value" class="tips1">
              <u--image
                v-if="storeInfo.imgLogo"
                :src="wxImg + storeInfo.imgLogo"
                width="60px"
                @click="upload"
                height="60px"
              ></u--image>
              <u--image
                v-else
                :src="wxImg + storeInfo.imgLogo"
                width="60px"
                @click="upload"
                height="60px"
              ></u--image>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">负责人</text>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.serviceName"
                type="text"
                input-align="right"
                placeholder="请输入门店负责人姓名"
              />
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">负责人电话</text>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.leadingPhone"
                type="text"
                input-align="right"
                placeholder="必须是平台已注册号码(选填)"
              />
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">客服电话</text>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.phone"
                type="text"
                input-align="right"
                placeholder="请输入客服电话"
              />
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">邮箱</text>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.email"
                type="text"
                input-align="right"
                placeholder="请输入邮箱"
              />
            </view>
          </u-cell>
          <u-cell :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">所在地区</text>
            </view>
            <view slot="value" class="tips1">
              <popupActivity
                class="u-cell4 flag"
                :newselectVal="[
                  storeInfo.provinceName || '',
                  storeInfo.cityName || '',
                  storeInfo.areaName || '',
                ]"
                @change="change"
              >
                <view v-if="cityFlag" class="city-name">{{
                  storeInfo.provinceName +
                  storeInfo.cityName +
                  storeInfo.areaName
                }}</view>
                <view
                  v-else
                  class="city-name"
                  style="display: flex; padding-left: 30vw"
                  >请选择</view
                >
              </popupActivity>
            </view>
          </u-cell>
          <u-cell>
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">详细地址</text>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.areaName4"
                type="text"
                input-align="right"
                placeholder="请输入详细地址"
              />
            </view>
          </u-cell>
          <u-cell @click="openMap()" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell1">定位地址</text>
            </view>
            <view slot="value" class="tips1">
              <u-input
                v-model="storeInfo.areaName3"
                type="text"
                input-align="right"
                placeholder="请点击获取定位"
              />
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
    <view class="sub1">
      <u-button @click="getSubmit" type="primary" text="提 交"></u-button>
    </view>
  </view>
</template>

<script>
const app = getApp();
const globalData = app.globalData;
const apiUrl = globalData.wxApi;
const wxImg = globalData.wxImg;
import {
  getStoreData,
  dealNum,
  httpPost,
  bdMapToTxMap,
  txMapToBdMap,
} from "@/utils/http.js";
import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
const pic1 = require(`@/img/my/my1.png`);
import popupActivity from "./component/popupActivity";
//#ifdef MP-WEIXIN
const chooseLocation = requirePlugin("chooseLocation");
//#endif

export default {
  data() {
    return {
      wxImg,
      apiUrl,
      dealNum,
      pic1,
      cityFlag: false,
      storeInfo: {
        addTime: "",
        address: "",
        provinceName: "",
        cityName: "",
        areaName: "",
        areaName3: "",
        areaName4: "",
        adminId: "",
        approveContent: "",
        approveStatus: "",
        approveTime: "",
        cityCode: "",
        code: "",
        countyCode: "",
        email: "",
        fans: "",
        geoHash: "",
        id: "",
        imgLogo: "",
        isDefault: true,
        isDisplay: true,
        latitude: "",
        leadingPhone: "",
        leadingUserId: "",
        longitude: "",
        name: "",
        openRiderDispatch: "",
        phone: "",
        provinceCode: "",
        serviceName: "",
        storeClassId: "",
        storeClassName: "",
        storeId: "",
        storeName: "",
        userId: "",
      },
      userInfo: {},
      flag: false,
      title: "",
    };
  },
  components: {
    popupActivity,
  },
  onShow() {
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    if (location) {
      const longAndLat = txMapToBdMap(location.longitude, location.latitude);
      this.storeInfo = {
        ...this.storeInfo,
        ...longAndLat,
        areaName3: location.name,
      };
    }
  },
  onUnload() {
    // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
    chooseLocation.setLocation(null);
  },
  onLoad(options) {
    if (options && options.id) {
      wx.setNavigationBarTitle({
        title: "编辑店铺",
      });
      this.title = "编辑店铺";
      const storeInfo = getStoreData("storeInfoArr").filter(
        (i) => i.id == options.id
      )[0];
      if (storeInfo && storeInfo.address) {
        this.storeInfo = {
          ...storeInfo,
          provinceName: storeInfo.address.split(" ")[0],
          cityName: storeInfo.address.split(" ")[1],
          areaName: storeInfo.address.split(" ")[2],
          areaName3: storeInfo.address.split(" ")[3],
          areaName4: storeInfo.address.split(" ")[4],
        };
      }
      this.cityFlag = true;
    } else {
      wx.setNavigationBarTitle({
        title: "新增店铺",
      });
      this.title = "新增店铺";
      const _this = this;
      wx.getLocation({
        isHighAccuracy: true, // 开启地图精准定位
        type: "gcj02", // 地图类型写这个
        // type: "wgs84", //gcj02
        success(res) {
          console.log("resMap:", res);
          const latitude = res.latitude;
          const longitude = res.longitude;
          const longAndLat = txMapToBdMap(longitude, latitude);
          _this.storeInfo = {
            ..._this.storeInfo,
            ...longAndLat,
          };
        },
        fail: (err) => {
          // 获取定位失败
        },
      });
    }
  },
  methods: {
    getSubmit() {
      if (!this.storeInfo.name) {
        wx.showToast({ icon: "none", title: "请输入门店名称" });
        return;
      } else if (!this.storeInfo.imgLogo) {
        wx.showToast({ icon: "none", title: "请上传门店图片" });
        return;
      } else if (!this.storeInfo.serviceName) {
        wx.showToast({ icon: "none", title: "请输入负责人姓名" });
        return;
      } else if (!this.storeInfo.phone) {
        wx.showToast({ icon: "none", title: "请输入客服电话" });
        return;
      } else if (!this.storeInfo.email) {
        wx.showToast({ icon: "none", title: "请输入邮箱" });
        return;
      } else if (!this.storeInfo.areaName) {
        wx.showToast({ icon: "none", title: "请选择所在地区" });
        return;
      } else if (!this.storeInfo.areaName4) {
        wx.showToast({ icon: "none", title: "请输入详细地址" });
        return;
      } else if (!this.storeInfo.areaName) {
        wx.showToast({ icon: "none", title: "请选择点位地址" });
        return;
      }

      if (this.title === "新增店铺") {
        const params = {
          ...this.storeInfo,
          address:
            this.storeInfo.provinceName +
            " " +
            this.storeInfo.cityName +
            " " +
            this.storeInfo.areaName +
            " " +
            this.storeInfo.areaName3 +
            " " +
            this.storeInfo.areaName4,
          userId: getStoreData("userInfo").id,
        };
        httpPost("/api/sellerstoreotherapply/createStore", params)
          .then((res) => {
            if (res.code == 0) {
              wx.navigateBack({
                delta: 1, // 返回上一级页面。
              });
            }
          })
          .catch((e) => {});
      } else {
        const params = {
          ...this.storeInfo,
          address:
            this.storeInfo.provinceName +
            " " +
            this.storeInfo.cityName +
            " " +
            this.storeInfo.areaName +
            " " +
            this.storeInfo.areaName3 +
            " " +
            this.storeInfo.areaName4,
        };

        httpPost("/api/sellerstoreotherapply/updateStore", params)
          .then((res) => {
            if (res.code == 0) {
              wx.navigateBack({
                delta: 1, // 返回上一级页面。
              });
            }
          })
          .catch((e) => {});
      }
    },
    openMap() {
      if (!this.storeInfo.longitude) {
        const _this = this;
        setTimeout(() => {
          _this.openMap();
        }, 500);
        return;
      }
      const key = "RZTBZ-KGWEQ-62J5Z-G7Q67-ZBH3S-A7BDD"; //使用在腾讯位置服务申请的key
      const referer = "微谷商家"; //调用插件的app的名称
      let obj = bdMapToTxMap(this.storeInfo.longitude, this.storeInfo.latitude);
      const location = JSON.stringify({
        ...obj,
      });
      const category = "生活服务,娱乐休闲";

      wx.navigateTo({
        url:
          "plugin://chooseLocation/index?key=" +
          key +
          "&referer=" +
          referer +
          "&location=" +
          location +
          "&category=" +
          category,
      });
    },
    toPage(v) {
      wx.navigateTo({
        url: v,
      });
    },
    change(data) {
      this.storeInfo.provinceName = data.data[0];
      this.storeInfo.cityName = data.data[1];
      this.storeInfo.areaName = data.data[2];
      this.cityFlag = true;
    },
    upload() {
      const self = this;
      uni.chooseImage({
        success(res) {
          uni.uploadFile({
            url: self.apiUrl + "/api/upload/store",
            filePath: res.tempFilePaths[0],
            name: "file",
            async success(res) {
              let data = JSON.parse(res.data);
              if (data.code != 0) {
                uni.showToast({
                  title: data.message,
                  icon: "none",
                });
                return;
              }
              self.storeInfo.imgLogo =
                data.data[0].path + "/" + data.data[0].name;
            },
            fail(error) {
              uni.showToast({
                title: "上传失败！",
                icon: "none",
              });
            },
          });
        },
      });
    },
    toCreate() {
      uni.$u.toast("功能开发中，敬请期待");
    },
    // getInfo() {
    //   const _this = this;
    //   httpGet("/api/user/info")
    //     .then((res) => {
    //       // _this.storeInfo = res.data;
    //     })
    //     .catch((e) => {
    //       //
    //     });
    // },
  },
};
</script>

<style lang="scss">
.my-store-info {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  padding: 16px;
  .sub1 {
    margin: 24px 0;
    /deep/.u-button {
      width: 78vw;
      height: 50px;
      line-height: 50px;
    }
    /deep/.u-button__text {
      font-size: 16px;
    }
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-direction: column;
    width: calc(100vw - 32px);
    .tips1 {
      min-width: 210px;
      display: flex;
      justify-content: flex-end;
    }
    /deep/.u-border {
      border: none;
    }
    .no-store-h1 {
      margin: 24px 0;
      font-size: 16px;
      color: #333;
      text-align: center;
      width: 100%;
    }
    .no-store-h2 {
      margin: 24px 0;
      font-size: 14px;
      color: #666;
      text-align: center;
      width: 100%;
    }

    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: column;
    .u-cell1 {
      font-size: 16px;
      line-height: 30px;
      color: #333;
    }
    .u-cell2 {
      font-size: 14px;
      margin-left: 6px;
      line-height: 30px;
      color: #f39d21;
    }
    .u-cell3 {
      font-size: 14px;
      line-height: 30px;
      color: #999;
      min-width: 50px;
    }
    .u-cell4 {
      font-size: 14px;
      line-height: 30px;
      color: #333;
      &.flag {
        min-width: 50vw;
        display: flex;
        justify-content: flex-end;
        text-align: right;
      }
    }
  }
  .my-top {
    display: flex;
    flex-direction: column;
    width: 100%;
    .ava {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
    }
  }
}
</style>
